<template>
  <view class="container">
    <StatusBar />
    
    <view class="test-panel">
      <view class="panel-section">
        <view class="section-title">测试模式选择</view>
        <view class="mode-list">
          <view 
            v-for="mode in testModes" 
            :key="mode.id"
            :class="['mode-item', { active: currentMode === mode.id }]"
            @click="selectMode(mode)"
          >
            <text class="mode-name">{{ mode.name }}</text>
            <text class="mode-desc">{{ mode.description }}</text>
          </view>
        </view>
      </view>

      <template v-if="currentMode">
        <view class="panel-section">
          <view class="section-title">测试参数设置</view>
          <view class="param-list">
            <view 
              v-for="param in currentModeParams" 
              :key="param.key"
              class="param-item"
            >
              <text class="param-label">{{ param.label }}</text>
              <view class="param-input">
                <template v-if="param.type === 'number'">
                  <input 
                    type="number"
                    v-model="param.value"
                    :placeholder="param.placeholder"
                  />
                  <text class="unit">{{ param.unit }}</text>
                </template>
                <template v-else-if="param.type === 'select'">
                  <picker 
                    :range="param.options"
                    :value="param.value"
                    @change="(e) => handleParamChange(param.key, e.detail.value)"
                  >
                    <view class="picker-value">
                      {{ param.options[param.value] || '请选择' }}
                    </view>
                  </picker>
                </template>
                <template v-else>
                  <input 
                    type="text"
                    v-model="param.value"
                    :placeholder="param.placeholder"
                  />
                </template>
              </view>
            </view>
          </view>
        </view>

        <view class="panel-section">
          <view class="section-title">测试结果</view>
          <view class="result-content">
            <template v-if="testStatus === 'idle'">
              <view class="empty-result">
                <text>点击开始测试按钮开始测试</text>
              </view>
            </template>
            <template v-else-if="testStatus === 'running'">
              <view class="testing">
                <view class="progress-bar">
                  <view 
                    class="progress"
                    :style="{ width: `${testProgress}%` }"
                  ></view>
                </view>
                <text class="progress-text">测试进行中 {{ testProgress }}%</text>
              </view>
            </template>
            <template v-else-if="testStatus === 'completed'">
              <view class="result-list">
                <view 
                  v-for="(result, index) in testResults" 
                  :key="index"
                  class="result-item"
                >
                  <text class="result-label">
                    {{ result.label }}：</text>
                  <text 
                    :class="['result-value', result.status]"
                  >{{ result.value }}</text>
                </view>
              </view>
            </template>
          </view>
        </view>

        <view class="action-bar">
          <button 
            class="action-btn"
            :disabled="testStatus === 'running'"
            @click="startTest"
          >
            开始测试
          </button>
          <button 
            class="action-btn outline"
            :disabled="testStatus === 'running'"
            @click="resetTest"
          >
            重置
          </button>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import StatusBar from '@/components/StatusBar/StatusBar.vue'

const currentMode = ref('')
const testStatus = ref('idle') // idle, running, completed
const testProgress = ref(0)
const testResults = ref([])

const testModes = [
  {
    id: 'performance',
    name: '性能测试',
    description: '测试设备的性能指标和响应时间',
    params: [
      {
        key: 'duration',
        label: '测试时长',
        type: 'number',
        value: 5,
        placeholder: '请输入测试时长',
        unit: '分钟'
      },
      {
        key: 'load',
        label: '负载类型',
        type: 'select',
        value: 0,
        options: ['低负载', '中负载', '高负载']
      }
    ]
  },
  {
    id: 'stability',
    name: '稳定性测试',
    description: '测试设备在长时间运行下的稳定性',
    params: [
      {
        key: 'duration',
        label: '测试时长',
        type: 'number',
        value: 24,
        placeholder: '请输入测试时长',
        unit: '小时'
      },
      {
        key: 'interval',
        label: '采样间隔',
        type: 'number',
        value: 5,
        placeholder: '请输入采样间隔',
        unit: '分钟'
      }
    ]
  },
  {
    id: 'pressure',
    name: '压力测试',
    description: '测试设备在极限条件下的表现',
    params: [
      {
        key: 'target',
        label: '目标压力',
        type: 'number',
        value: 4.5,
        placeholder: '请输入目标压力',
        unit: 'MPa'
      },
      {
        key: 'step',
        label: '压力步进',
        type: 'number',
        value: 0.5,
        placeholder: '请输入压力步进',
        unit: 'MPa'
      }
    ]
  }
]

const currentModeParams = computed(() => {
  const mode = testModes.find(m => m.id === currentMode.value)
  return mode ? mode.params : []
})

const selectMode = (mode) => {
  currentMode.value = mode.id
  resetTest()
}

const handleParamChange = (key, value) => {
  const param = currentModeParams.value.find(p => p.key === key)
  if (param) {
    param.value = value
  }
}

const startTest = () => {
  testStatus.value = 'running'
  testProgress.value = 0
  testResults.value = []

  // 模拟测试进度
  const timer = setInterval(() => {
    testProgress.value += 5
    if (testProgress.value >= 100) {
      clearInterval(timer)
      completeTest()
    }
  }, 500)
}

const completeTest = () => {
  testStatus.value = 'completed'
  // 模拟测试结果
  testResults.value = [
    {
      label: '响应时间',
      value: '150ms',
      status: 'success'
    },
    {
      label: '稳定性指标',
      value: '98%',
      status: 'success'
    },
    {
      label: '压力承受',
      value: '4.2MPa',
      status: 'warning'
    },
    {
      label: '温度波动',
      value: '±0.5℃',
      status: 'success'
    }
  ]
}

const resetTest = () => {
  testStatus.value = 'idle'
  testProgress.value = 0
  testResults.value = []
}
</script>

<style lang="scss" scoped>
.container {
  padding-top: 88rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.test-panel {
  padding: 20rpx;

  .panel-section {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 30rpx;
    }
  }
}

.mode-list {
  .mode-item {
    background-color: #f5f5f5;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    transition: all 0.3s;

    &.active {
      background-color: #e3f2fd;
      border: 2rpx solid #0066cc;
    }

    .mode-name {
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 10rpx;
      display: block;
    }

    .mode-desc {
      font-size: 26rpx;
      color: #666666;
    }
  }
}

.param-list {
  .param-item {
    margin-bottom: 30rpx;

    .param-label {
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 16rpx;
      display: block;
    }

    .param-input {
      display: flex;
      align-items: center;
      gap: 20rpx;

      input {
        flex: 1;
        height: 80rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
      }

      .unit {
        font-size: 28rpx;
        color: #666666;
        width: 80rpx;
      }

      .picker-value {
        flex: 1;
        height: 80rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        line-height: 80rpx;
      }
    }
  }
}

.result-content {
  min-height: 300rpx;

  .empty-result {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300rpx;
    color: #999999;
    font-size: 28rpx;
  }

  .testing {
    .progress-bar {
      height: 8rpx;
      background-color: #f5f5f5;
      border-radius: 4rpx;
      overflow: hidden;
      margin-bottom: 20rpx;

      .progress {
        height: 100%;
        background-color: #0066cc;
        transition: width 0.3s;
      }
    }

    .progress-text {
      font-size: 28rpx;
      color: #666666;
      text-align: center;
      display: block;
    }
  }

  .result-list {
    .result-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .result-label {
        font-size: 28rpx;
        color: #666666;
        width: 200rpx;
      }

      .result-value {
        font-size: 28rpx;
        font-weight: bold;

        &.success {
          color: #4caf50;
        }

        &.warning {
          color: #ff9800;
        }

        &.error {
          color: #f44336;
        }
      }
    }
  }
}

.action-bar {
  display: flex;
  gap: 20rpx;
  padding: 30rpx;

  .action-btn {
    flex: 1;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    line-height: 88rpx;

    &::after {
      border: none;
    }

    &:not(.outline) {
      background-color: #0066cc;
      color: #ffffff;
    }

    &.outline {
      background-color: #ffffff;
      color: #0066cc;
      border: 2rpx solid #0066cc;
    }

    &:disabled {
      opacity: 0.5;
    }
  }
}
</style> 